<template>
	<view class="min100 bg container" style="padding-bottom:240rpx;">
		<view class="">
			<!-- 头部 -->
			<view class="diamondMall_head p20 flex-between flex1" :style="{ background: bg_color}">
				<view class="">
					<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
						@click="backmarket()"></image>
				</view>
				<view class="size-30 center" :style="{opacity:textcolor}">
					{{info.name}}
				</view>
				<view class="">
			
				</view>
			</view>
			<view class="topWrap1  " style="">
				<image class="home_detail_bg" src="../../static/index/detail_bg.jpg" mode=""></image>
			
				<img :src="info.images" class="collectImg">
			
				<view class="autrhorinfo  radius-20  size-40 ">
					<view class="flex1 flex-between" style=";">
						<view class="" style="color: #FFF;">
							￥{{info.price}}
						</view>
					</view>
					<view class="detail_name" style="color: #000;">
						<view class="">
							{{info.name}}
						</view>
						<view class="" style="display: flex;">
							<view class="" style="display: flex;margin: 20px 20px 0 0;">
								<view class="homedetail_limit_1">
									限量
								</view>
								<view class="homedetail_limit_2">
									{{info.stock}}份
								</view>
							</view>
							<view class="" style="display: flex;margin: 20px 20px 0 0;">
								<view class="homedetail_limit_1">
									流通
								</view>
								<view class="homedetail_limit_2">
									{{info.surplus}}份
								</view>
							</view>
						</view>
					</view>
					
			
				</view>
			
			</view>
			
			
			<!-- <view class="topWrap">
				<img :src="info.images" class="collectImg">
				<view class="text-center topContent">
					<view class="size-34 mb-22">
						{{info.name}}
					</view>
					<view class="flex flex-start size-22" style="margin:0  245rpx;">
						<view class="flex flex-start  mr-16" style="width:200rpx">
							<view class="tipsLeft text-center ptb-7 radius-6" style="width:84rpx">
								限量
							</view>
							<view class="tipsRight red ptb-7 text-center"
								style="">
								{{info.stock}}份
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="openBtn text-center" @click="openBox">
				一键开启
			</view>
			<view class="center" style="color: #999999;font-size: 20rpx;margin-top: 30rpx;">
				一次最多打开10个盲盒
			</view>
			<!-- <view class="bg plr-60 ptb-30 red size-50 bold">
				￥{{info.price}}
			</view> -->
			<!-- 介绍 -->
			<view class="radius-20 bg plr-60 ptb-30">
				<view class="">
					<view class=" size-22">
						您可能抽到以下藏品中的1个
					</view>
				</view>
				<empty v-if="info.goods.length==0"></empty>
				<view class="" v-else>
					<view class="flex ptb-20 flex-between" style="border-bottom:1rpx solid #515151"
						v-for="(item,index) in info.goods" :key="index">
						<view class="flex">
							<image style="width:120rpx;height:120rpx;border-radius: 20rpx;" :src="item.image" mode="">
							</image>
							<view class="ml-20">
								<view class="mb-20 bold">
									{{item.name}}
								</view>
								<view>
									价值：<text class="red">￥{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="">
							概率：{{item.rate}}%
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="radius-20 bg plr-60 ptb-30">
				<view class="mb-30 size-30">
					作品故事
				</view>
				<view class=" infoWrap" v-html="info.content">

				</view>
			</view>
			<view class="radius-20 bg plr-60 ptb-30">
				<view class="mb-30 size-30">
					购买须知
				</view>
				<view class=" infoWrap" v-html="info.buy_content">
			
				</view>
			</view>
		</view>
		<view class="btmWrap flex flex-between ptb-20 plr-60" v-if="info.status==1||info.status==2">
			<!-- <button class="saleBtn" v-if="info.status==1||info.status==2" @click="transferShow=true">转赠</button> -->
			<!-- <button class="saleBtn ml-20" v-if="info.status==1||info.status==2" @click="toChange()">改价</button> -->
			<button class="transBtn ml-20" @click="submitOpen" v-if="info.status==1||info.status==2">拆开一个</button>
			<button class="saleBtn ml-20" @click="toSale()" v-if="info.status==1&&is_trade==1">出售</button>
			<button class="saleBtn ml-20" @click="upCollect()" v-if="info.status==2">
				<text v-if='info.is_show==1'>下架</text>
				<text v-if='info.is_show==0'>上架</text>
			</button>
		</view>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.images" class="collectPreImg">
			</view>
		</u-popup>
		<!-- 转赠 -->
		<u-popup v-model="transferShow" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">转赠</view>
				<u-field v-model="transferPhone" label-width="0" placeholder="请输入受赠人手机号" />
				<!-- <u-field v-model="saleMoney" label-width="0" type="password" placeholder="请输入交易密码" /> -->
				<u-button @click="submitTransfer" hover-class="none" type="primary" class="mt-30">确认</u-button>
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
		<!-- 打开 -->
		<!-- 拆开结果 -->
		<u-popup v-model="openPop" class="openWrap" mode="center" border-radius="20" width="500rpx;">
			<view class="popWrap text-center size-24">
				<image :src="openfig.image" class="openImg radius-20"></image>
				<view class="mb-20 mt-40 white">
					{{openfig.name}}
				</view>
				<!-- <view class="white">
					价值：<text class='red'>￥{{openfig.price}}</text>
				</view> -->
			</view>
			<image @click="closeOpen" src="../../static/close.png" class="closeIcon" mode=""></image>
		</u-popup>
		<!-- 多个拆开结果 -->
		<u-popup v-model="openPop1" class="openWrap" mode="center" border-radius="20" width="500rpx;" height="800rpx" >
			<view class="popBlindBox text-center size-24">
				<view class="popItem" v-for="item in newOpenfig">
					<image :src="item.image" class="openImg radius-20"></image>
					<view class="white">
						{{item.name}}
					</view>
					<!-- <view class="white">
						价值：<text class='red'>￥{{item.price}}</text>
					</view> -->
				</view>
			</view>
			<!-- <image @click="closeOpen" src="../../static/close.png" class="closeIcon" mode=""></image> -->
		</u-popup>
		<!--出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">出售详情</view>
				<u-field v-model="salePrice" @input="getShowInput" label="出售价格(￥)" label-width="180" placeholder="请输入价格"
					type="number" />
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<!-- <view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view> -->
				<!-- <view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view> -->
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitSale">确认
				</u-button>
			</view>
		</u-popup>
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			 :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价详情</view>
				<u-field v-model="afterPrice" @input="getShowInput" label="价格(￥)" label-width="180" placeholder="请输入价格"
					type="number" />
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				bg_color: '',
				textcolor: '0',
				gifUrl: "../../static/open.gif",
				gifShow: false, //盲盒动图
				preShow: false,
				changeShow: false,
				afterPrice: '',
				id: '',
				box_id: '',
				transferPhone: '',
				transferShow: false,
				openfig: {},
				newOpenfig: [],
				openPop: false,
				openPop1: false,
				salePrice: '',
				saleShow: false,
				info: {
					goods: []
				},
				is_trade: 0,
				saleConfig: {},
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
			}
		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
			})
			this.$http('api/index/fee').then(res => {
				this.saleConfig = res;
			})
		},
		methods: {
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/my/myBox'
				})
			},
			finish() {
				this.$http('api/user/checkTradePass', {
					pass: this.password
				}).then(res => {
					if (res.is_check == 0) {
						uni.showToast({
							title: "密码错误",
							icon: 'none'
						})
						return;
					} else if (res.is_check == 1) {
						this.$http('api/orders/boxSale', {
							id: this.id,
							price: this.salePrice
						}, 'POST').then(res => {
							uni.showToast({
								title: "出售成功!",
								icon: "none"
							})
							this.saleShow = false;
							setTimeout(() => {
								uni.navigateTo({
									url: './myBox?type=' + 2
								})
							}, 500)
						})
						
					}
				});
				this.showKeyboard = false;
				this.saleShow = false;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			toChange() {
				this.changeShow = true;
				this.afterPrice = this.info.price
				this.getShowInput(this.afterPrice);
			},
			toSale() {
				this.saleShow = true;
				this.salePrice = this.info.price;
				this.getShowInput(this.salePrice);
			},
			getShowInput(e) {
				let saleConfig = this.saleConfig;
				this.terracePrice = e * saleConfig.terrace_rate / 100;
				this.authorPrice = e * saleConfig.author_rate / 100;
				this.payPrice = e * saleConfig.pay_rate / 100;
				this.realPrice = e - this.terracePrice - this.authorPrice - this.payPrice;
			},
			closeOpen() {
				this.openPop = false;
				this.openPop1 = false;
				uni.navigateTo({
					url: './myBox?type=' + 6
				})
			},
			init() {
				this.$http('api/orders/userBoxDetail', {
					id: this.id
				}).then(res => {
					this.info = res;
					this.box_id=this.info.box_id
				})
			},
			// 转增
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxTransfer', {
					id: this.id,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.transferPhone = '';
					setTimeout(() => {
						uni.navigateTo({
							url: './myBox?type=' + 5
						})
					}, 500)
				})
			},
			// 一键开启
			openBox(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '立即拆开?',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxOpenTenTimes', {
								box_id: _this.box_id
							}, 'POST').then(res => {
								_this.gifUrl = `../../static/open.gif?${new Date().getTime()}`
								_this.gifShow = true;
								setTimeout(() => {
									_this.gifShow = false;
									_this.newOpenfig = res;
									console.log(res,res.data)
									_this.openPop1 = true;
								}, 3800)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 打开
			submitOpen() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '立即拆开?',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxOpen', {
								id: _this.id
							}, 'POST').then(res => {
								_this.gifUrl = `../../static/open.gif?${new Date().getTime()}`
								_this.gifShow = true;
								setTimeout(() => {
									_this.gifShow = false;
									_this.openfig = res;
									_this.openPop = true;
								}, 3800)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 出售
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.showKeyboard = true
				this.password = ''; //唤醒输入组件时清空密码
			},
			//上架
			upCollect() {
				let _this = this;
				let msg = _this.info.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: "将此盲盒" + msg,
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxUpdateShow', {
								id: _this.id,
								is_show: _this.info.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 改价
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxUpdatePrice', {
					id: this.id,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		// background: linear-gradient(to bottom,#E2DFFE,#FFFFFF);
	}
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;

		uni-button {
			width: 45%;
			height: 80rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			line-height: 80rpx;
		}

		.transBtn {
			color: #fff;
			background: linear-gradient(to right,#585858,#2A2A2A);
		}

		.saleBtn {
			color: #333333;
			background: transparent;
			border: 1rpx solid #2A2A2A;
		}
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}

	.tipsLeft {
		background: rgb(42,42,42);
		color: #fff;
		border-radius: 24rpx 0 0 24rpx;
		border: 1rpx solid rgb(42,42,42);
	}
	.tipsRight{
		border-radius:0 24rpx 24rpx 0;
		width:116rpx;
		// padding: 0rpx 20rpx;
		border: 1rpx solid rgb(42,42,42);
		color: #000;
	}
	.collectImg {
		width: 75%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: relative;
	}
	.openBtn{
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		color: #fff;
		letter-spacing: 3rpx;
		margin-top: 40rpx;
		background: linear-gradient(to right,#585858,#2A2A2A);
	}
	.topWrap{
		background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		padding-top: 120rpx;
		position: relative;
	}
	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}
	.topWrap1 {
		// background: url(../../static/detailsBg.png) 0 0 no-repeat;
		// background-size: 100% 100%;
		// width: 100%;
		// height: 926rpx;
		// padding-top: 120rpx;
		// position: relative;
		background-size: 100% 100%;
		// background-color: #FFF;
		width: 100%;
		position: relative;
		.home_detail_bg {
			width: 100%;
			// height: 950rpx;
			height: 91%;
			position: absolute;
			left: 0;
			top: -40rpx;
			z-index: -1;
		
		}
		.collectImg {
			width: 86%;
			display: block;
			margin: 0px auto;
			height: auto;
			position: relative;
			border-radius: 7%;
			top: 160rpx;
			border: 20rpx solid #FFF;
		}
		.autrhorinfo {
			width: 92%;
			background-color: #FFF;
			margin: 180rpx auto 60rpx;
			background-image: linear-gradient(to right, #636363, #2B2B2B);
			height: 270rpx;
			padding: 30rpx;
			.detail_name {
				background-color: #FFF;
				color: rgb(0, 0, 0);
				width: 110%;
				height: 200rpx;
				border-radius: 22rpx;
				margin: 20rpx 0 0 -30rpx;
				padding: 24rpx;
				font-size: 30rpx;
				border: 1px solid #EBEBEB;
			}
			.homedetail_limit_1 {
				width: 100rpx;
				height: 40rpx;
				background-color: #F5BA76;
				text-align: center;
				line-height: 40rpx;
				font-weight: 500;
				// font-family: cursive;
				font-size: 26rpx;
			}
			
			.homedetail_limit_2 {
				// width: 100rpx;
				height: 40rpx;
				background-color: #F9EFE5;
				text-align: center;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #AB6E28;
				padding: 0 6rpx;
			}
		
		}
	}

	.infoWrap {
		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}
	
	.popWrap ,.popBlindBox{
		background: url(../../static/openImg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 500rpx;
		// height: 526rpx;
		padding-top: 128rpx;
		position: relative;

		.openImg {
			width: 240rpx;
			height: 240rpx;
			background: #666;
		}
	}
	.popBlindBox{
			// width: 500rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-right: 20px;
			padding-left: 20px;
			.popItem{
				width: 30%;
				.openImg {
					width: 120rpx;
					height: 120rpx;
					background: #666;
				}
			}
	}
	.openGif {
		width: 500rpx;
		height: 500rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 500rpx;
			height: 500rpx;
		}
	}

	.closeIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx auto;
		display: block;
	}

	.openWrap {
		::v-deep  .u-mode-center-box {
			background-color: transparent;
		}
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
</style>
